<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
	<title>沃爱彩信</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<%@ include file="taglibs.jsp"%>

<title>发送明信片</title>
</head>
<body>
<!-- Start of second page: #pageSendPostcard -->
<div  data-role="page"  id="pageSendPostcard"  >
<script type="text/javascript">
$(function(){
	$("input[type='checkbox']").on('change',function(event, ui) { 
		var ch = $(this).checkboxradio().attr("checked");
		var sndname = $("#sendName").val();
		var text = $(this).val();
		if(ch =="checked"){
			if(sndname!=''){
				$("#sendName").val(sndname+","+text);
			}else{
				$("#sendName").val(text);
			}
		}
	}); 
});
</script>
		<div data-role="header" data-theme="e">
			<h1>发送明信片</h1>
			<a href="#" data-icon="back" class="ui-btn-right" data-rel="back">返回</a>
		</div>
					
		<div data-role="content" data-theme="c">
		<label for="basic"><a href="#popupMenu" data-rel="popup" data-inline="true"><img alt="" src="images/mms-people.png">收件人:</a></label>
		<div data-role="popup" id="popupMenu" data-theme="a" style="height: 300px;overflow-y: scroll;">
			 	<fieldset data-role="controlgroup" id="peopleList">
					<legend>选择联系人:</legend>
					<%for(int i = 0 ; i <= 30 ; i++) {%>
					<input type='checkbox' name='checkbox-<%=i %>' id='checkbox-<%=i %>' class='custom' value='张三'/><label for='checkbox-<%=i %>'>张三</label>
					<%} %>
			    </fieldset>
		</div>
		<input type="search" name="sendName" id="sendName" value="" data-mini="true" />
			<img alt="" src="images/maskCAW6HHS3-18.jpg" >
			<label for="textarea-a"><img alt="" src="images/mms-edit.png" >留言内容:</label>
			<textarea name="textarea" id="textarea-a"></textarea>
			<label><a href="#popupMusic" data-rel="popup" data-inline="true"><img alt="" src="images/mms-music.png" >背景音乐</a></label>克罗地亚狂想曲<p/>
			<audio controls="controls" loop="loop"> 
			   <source src="mid/13_ThatsGood.mp3" />  
			   Your browser does not support the audio element.
			</audio>
			<div data-role="popup" id="popupMusic" data-theme="a">
			 	<fieldset data-role="controlgroup">
					<legend>选择背景音乐:</legend>
					<input type="checkbox" name="checkbox-1m" id="checkbox-1m" class="custom" value="梁祝"/>
					<label for="checkbox-1m">梁祝</label>

					<input type="checkbox" name="checkbox-2m" id="checkbox-2m" class="custom" value="彩虹"/>
					<label for="checkbox-2m">彩虹</label>
					
					<input type="checkbox" name="checkbox-3m" id="checkbox-3m" class="custom" value="江南style"/>
					<label for="checkbox-3m">江南style</label>

			    </fieldset>
		</div>
		<div class="ui-grid-a">
	<div class="ui-block-a"><a href="#send" onclick="alert('发送成功');" data-rel="popup" data-position-to="window" data-role="button" data-mini="true" data-transition="pop">发送</a></div>
	<div class="ui-block-b"><a href="#time" data-rel="popup" data-position-to="window" data-role="button" data-mini="true" data-transition="pop">定时发送</a></div>
					<div data-role="popup" id="time" data-overlay-theme="a" data-theme="c"  class="ui-corner-all">
						<div data-role="header" data-theme="a" class="ui-corner-top" style="width: 370px;">
							<h1>定时发送</h1>
						</div>
						
	<fieldset data-role="controlgroup" data-type="horizontal">
		    <legend>选择定时发送的时间：</legend>
		<label for="select-choice-year">Year</label>
	    <select name="select-choice-year" id="select-choice-year">
				<option value="2011">2010</option>
				<option value="2011">2011</option>
				<option value="2010">2012</option>
				<option value="2009">2013</option>
				<option value="2008">2014</option>
				<option value="2007">2015</option>
				<option value="2006">2016</option>
				<option value="2005">2017</option>
				<option value="2004">2018</option>
		</select>
		 
		<label for="select-choice-month">Month</label>
		<select name="select-choice-day" id="select-choice-day">
			<%for(int i = 1 ; i <= 12 ; i++) {%>
				<option>
				<%=i %>
				</option>
				<%} %>
		</select>
		
		<label for="select-choice-day">Day</label>
		<select name="select-choice-month" id="select-choice-month">
			<%for(int i = 1 ; i <= 31 ; i++) {%>
				<option>
				<%=i %>
				</option>
				<%} %>
		</select>
		
		<label for="select-choice-hour">Hour</label>
		<select name="select-choice-hour" id="select-choice-hour">
			<%for(int i = 1 ; i <= 23 ; i++) {%>
				<option>
				<%=i %>
				</option>
				<%} %>
		</select>
		
		
		彩信将在 今天下午5:00 投递到对方手机
	</fieldset>
							<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" >取消</a>    
							<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">发送</a>  
				
					</div>
</div><!-- /grid-a -->
</div>
</div><!-- page SendPostcard -->
   
   	
   
</body>
</html>